// 输入框组件
import './index.scss';

import React,{useRef} from 'react';

function AddInput(props) {
  const { isInputShow, addItem } = props;

  //通过useRef钩子创建ref挂在到DOM里
  const inputRef = useRef();

  //点击添加按钮
  const submitValue = () => {
    //通过inputRef获取DOM元素的值(即为输入框输入内容)
    // console.log(inputRef);
    //{current: input}
    // console.log(inputRef.current.value); 
    //打印用户输入框输入的内容
    let inputValue = inputRef.current.value.trim();

    if (inputValue.length === 0) {
      return;
    }

    //新增输入框内容到待办事件列表里
    addItem(inputValue);

    //点击按钮完毕时清空输入框显示的内容
    inputValue = '';
  }

  return (
    <>
      {
        isInputShow
          ?
          (
            <div className="input-wrapper">
              <input
                type="text"
                placeholder='请输入待办事件'
                ref={inputRef}
              />
              <button
                className='btn btn-primary'
                onClick={submitValue}
              >添加</button>
            </div>
          )
          :
          ''
      }
    </>
  );
}

export default AddInput;